// @import 'ant-design-vue/lib/style/themes/default.less';
// @import 'ant-design-vue/dist/antd.dark.less';
// @root-entry-name: variable;

@white: #fff;
@black: #000;
 @wt: #fff;

 @bk: #000;
 @bk1: #0B0F21;
 @bk2: #0A111B;
 @bk3: #2A3B52;
 @bk4: #101A27;
 @bk5: #1D293A;
 @bk7: #182230;
 @bk8: #111C29;
 
 @rd1: #FF6838;
 
 @gy1: #3F6388;
 @gy2: #4D76A1;
 @gy3: #1B6FAC;
 
 @bl1: #24A7CA;
 @bl2: #669CFF;
 @bl3: #5E8BEC;
 
 @gn1: #81EAE5;
 @gn2: #50DB6F;
 @gn3: #68EFCF;
 @gn4: #2C868C;
 @gn5: #8BCB5A;
 @gn6: #63E3FF;
 @gn7: #43FA81;
 
 @eg1: #FF5029;
 @eg2: #FF975C;
 @eg3: #32B8D6;
 @eg4: #79EA9F;
 
 @yl1: #FFCC66;
 @yl2: #FFB156;
 @yl3: #A47F5D;
 @yl4: #FFD15C;
 
 @bn1: #B3513E;
 
 @pl1: #546BBD;
 
 @text1: #609FFF;
 @text2: #FF6838;
 @text3: #FCBC41;
 @text4: #CD7BFF;
 @text5: #50DB6F;
 @text6: #90B6D9;
 
 @status1: #FF7F23;
 @status2: #50BCF9;
 

html:not(.dark) {
  @component-background: @white;
}

// html.dark {
// }

.setStyle(@className, @propName) {
  html {
    &.dark {
      .@{className} {
        @{propName}: @black;
      }
    }

    &:not(.dark) {
      .@{className} {
        @{propName}: @white;
      }
    }
  }
}

.themeColor(@classNames, @i: 1) when(@i =< length(@classNames)) {
  @className: extract(@classNames, @i);

  .setStyle(@className, background-color);
  .setStyle(@className, color);

  .themeColor(@classNames, (@i + 1));
}

.themeTextColor(@classNames, @i: 1) when(@i =< length(@classNames)) {
  @className: extract(@classNames, @i);
  .setStyle(@className, color);
  .themeColor(@classNames, (@i + 1));
}

.themeBgColor(@classNames, @i: 1) when(@i =< length(@classNames)) {
  @className: extract(@classNames, @i);
  .setStyle(@className, background-color);
  .themeColor(@classNames, (@i + 1));
}
